@import '~antd/lib/style/themes/default.less';
.footer {
    opacity: 0.6;
    font-size: 12px;
    color: #f2f2f2;
    letter-spacing: 0;
    line-height: 60px;
    margin-bottom: 0;
}
.logo {
    float: left;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.14px;
    margin-right: 160px;
    a {
        color: #fff;
    }
}
.user {
    float: right;
    height: 50px;
    line-height: 50px;
    a,
    a + span {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 10px;
        color: #fff;
        cursor: pointer;
    }
}
:global {
    .owLayout {
        .ant-menu.ant-menu-dark {
            .ant-menu-item-selected {
                background-color: transparent;
                div {
                    position: relative;
                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        right: 0;
                        height: 2px;
                        bottom: 0;
                        width: 100%;
                        background: #fff;
                    }
                }
            }
        }
    }
}
.header {
    height: 64px;
    padding: 0 12px 0 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    position: relative;
}

.menu {
    :global(.anticon) {
        margin-right: 8px;
    }
    :global(.ant-dropdown-menu-item) {
        width: 160px;
    }
}

i.trigger {
    font-size: 20px;
    line-height: 64px;
    cursor: pointer;
    transition: all 0.3s, padding 0s;
    padding: 0 24px;
    &:hover {
        background: @primary-1;
    }
}

.right {
    float: right;
    height: 100%;
    .action {
        cursor: pointer;
        padding: 0 12px;
        display: inline-block;
        transition: all 0.3s;
        height: 100%;
        > i {
            font-size: 16px;
            vertical-align: middle;
            color: @text-color;
        }
        &:hover,
        &:global(.ant-popover-open) {
            background: @primary-1;
        }
    }
    .search {
        padding: 0;
        margin: 0 12px;
        &:hover {
            background: transparent;
        }
    }
    .account {
        .avatar {
            margin: 20px 8px 20px 0;
            color: @primary-color;
            background: rgba(255, 255, 255, 0.85);
            vertical-align: middle;
        }
    }
}

@media only screen and (max-width: @screen-md) {
    .header {
        :global(.ant-divider-vertical) {
            vertical-align: unset;
        }
        .name {
            display: none;
        }
        i.trigger {
            padding: 0 12px;
        }
        .logo {
            padding-right: 12px;
            position: relative;
        }
        .right {
            position: absolute;
            right: 12px;
            top: 0;
            background: #fff;
            .account {
                .avatar {
                    margin-right: 0;
                }
            }
        }
    }
}
